<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>order</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        .outer {
            width: 205px;
            height: 40px;
            margin: 100px auto;
          
        }
        
        .outer>span {
            display: block;
            width: 100px;
            height: 40px;
            float: left;
            border: 1px solid black;
            text-align: center;
            line-height: 40px;
        }
        
        .outer span:nth-child(1) {
            border-right: none;
        }
        
        .content {
            /*background-color: orange;*/
            width: 205px;
            height: 125px;
            margin: -98px auto;
        }
        .order{
            width: 100px;
            height: 120px;
            float: left;
            border: 1px solid black;
            text-align: center;
        }
        .order div{
            margin-top: 12px;
        }
        .sale{
            display: none;
            border-top: none;
        }
        .consume{
            display: none;
            border-top: none;
            margin-left: 100px;
        }
        p{
            width: 200px;
            margin: 150px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <span id="sale">销售订单</span>
        <span id="consume">消费订单</span>
        <div style="clear: both"></div>
    </div>
    <div class="content">
        <div class="order sale">
            <div>订单1</div>
            <div>订单2</div>
            <div>订单3</div>
        </div>
        <div class="order consume">
            <div>消费1</div>
            <div>消费2</div>
            <div>消费3</div>
        </div>
        <div style="clear: both"></div>
    </div>
    <p></p>
</body>

</html>
<script>
    //鼠标经过显示销售选项
        //显示
        $('#sale').on('mouseover',function(){
             $('.sale').css('display','block');
             $('.consume').css('display','none');
        //鼠标经过销售选项下的div 改变div背景色
        $('.sale div').mouseover(function(){
            $(this).css('background-color','gray');
            //其他的变透明
            $(this).siblings().css('background-color','transparent');
            //点击选中的方法 将P标签显示在页面
            $(this).click(function(){
                $('p').html($(this).html());
                //隐藏 sale
                $('.sale').css('display','none');
            });
        });
      });
    
    //同理 消费选项

    $('#consume').mouseover(function(){
        $('.sale').css('display','none');
        $('.consume').css('display','block');
        $('.consume div').mouseover(function(){
            $(this).css('background-color','gray');
            //其他的变透明
            $(this).siblings().css('background-color','transparent');
            //点击选中的方法 将P标签显示在页面
            $(this).click(function(){
                $('p').html($(this).html());
                $('.consume').css('display','none');
            });
        });
    });
</script>